<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
    <title>Title</title>
    <link rel="stylesheet" href="css/index.css">
    <link rel="stylesheet" href="css/base.css">
    <link rel="stylesheet" href="//at.alicdn.com/t/font_764721_203phjxz6d.css">
    <link rel="stylesheet" href="css/swiper-4.3.3.min.css">
    <link rel="stylesheet" href="css/banner.css">
    <link rel="stylesheet" href="css/goods.css">
    <script src="js/jquery-1.11.1.min.js"></script>
    <script src="js/swiper-4.3.3.min.js"></script>
    <script src="js/index.js"></script>
    <script src="js/goods.js"></script>
</head>
<body>
<a name="h1"></a>
<div id="header"></div>
<div class="main clearfix">
    <div class="maintopleft1">
        全部商品分类 <i class="iconfont icon-svg-"></i>
        <div class="undermainleft1">
            <ul >
                <li><a href="" class="a2">服装服饰</a></li>
                <li><a href="" class="a2">食品饮料</a></li>
                <li><a href="" class="a2">生活家居</a></li>
                <li><a href="" class="a2">美妆个护</a></li>
                <li><a href="" class="a2">箱包配饰</a></li>
                <li><a href="" class="a2">海外购</a></li>
                <li><a href="" class="a2">运动健康</a></li>
                <li><a href="" class="a2">布艺家纺</a></li>
                <li><a href="" class="a2">品质厨房</a></li>
                <li><a href="" class="a2">厨房电器</a></li>
                <li><a href="" class="a2">生活电器</a></li>
                <li><a href="" class="a2">3C数码</a></li>
            </ul>
        </div>
    </div>
    <div class="maintopright">
        <ul>
            <li><a href="" class="a1">首页</a></li>
            <li><a href="" class="a1">TV直播</a></li>
            <li><a href="" class="a1">品牌惠</a></li>
            <li><a href="" class="a1">家有购物</a></li>
            <li><a href="" class="a1">家有尊享</a></li>
        </ul>
    </div>
</div>
<hr class="clearfix">
<div class="goodsbody clearfix">
    <div class="allgoods">
        <h2><a href="index.html">全部商品</a></h2>
    </div>
    <div class="showgoods">
        <div class="pic" id="pic">
            <div class="picleft">
                <i class="iconfont icon-shang1"></i>
                <ul>
                    <li><img src="image/商品详情2.jpg" alt=""></li>
                    <li><img src="image/商品详情.jpg" alt=""></li>
                    <li><img src="image/商品详情1.jpg" alt=""></li>
                    <li><img src="image/商品详情2.jpg" alt=""></li>
                </ul>
                <i class="iconfont icon-xia"></i>
            </div>
            <div class="picright" id="picright"  onmouseover="emerge()" onmouseout="hide()" onmousemove="move(event)">
                <img src="image/商品详情2.jpg" class="smallimg">
                <div class="cover" id="cover"></div>
            </div>
            <div class="picrighthid hidden" id="picrighthid">
                <img  id="bigimg" src="image/商品详情2.jpg" class="bigimg">
            </div>
        </div>
        <span class="shoucang"><i class="iconfont icon-shoucang"></i>收藏</span>
        <div class="xinxi">
            <h3>东芝55英寸安卓网络LED电视</h3>
            <b>¥2799.00</b>
            <em>¥4199.00</em>
            <a href="" class="jinru">进入店铺 <div class="icon"><i class="iconfont icon-gengduo"></i></div></a>
            <p class="num"><b>商品编号</b><span>957025</span></p>
            <p class="shou"><b>月销</b><span>7件</span></p>
            <p class="number"><b>购买数量</b><label><a class="jian"><i class="iconfont icon-fanhui shangpiniconjian"></i></a><input type="text" class="buycount" value="1"><a class="jia" ><i class="iconfont icon-gengduo shangpiniconjia"></i></a></label><span></span></p>
            <p class="list" id="pAuthorityLogo"><a href="/IndexMain.html?u=SellerInfo&amp;pid=957025" target="_blank" ><span class="s1" style="background: url(http://image-family.huijiayou.cn/cfiles/staticfiles/upload/29cd6/c091b1516a0948b89ffe0879fdf03ca6.png) no-repeat left top;background-size: 20px auto;">正品保障</span></a><span class="s1" style="background: url(http://image-family.huijiayou.cn/cfiles/staticfiles/upload/29cd6/12c812681e9d435ca2d0d68a35e688aa.png) no-repeat left top;background-size: 20px auto;">全场包邮</span><span class="s1" style="background: url(http://image-family.huijiayou.cn/cfiles/staticfiles/upload/29cd6/7984ea16eb2b484d9dff395c71b7af8d.png) no-repeat left top;background-size: 20px auto;">支持7日无理由退货</span></p>
            <div class="btn">
                <a class="a3" style="cursor: pointer;" >加入购物车</a>
                <a class="a1" style="cursor: pointer;" >立即购买</a>
                <b id="btnPhone" class="serviceTel" style="">拨打<i>4008-678-888</i>，可语音下单~</b>
            </div>
        </div>

    </div>
    <div class="goodsinfor">
        <ul class="goodstab">
            <li class="tab-item active">商品详情</li>
            <li class="tab-item">规格参数</li>
        </ul>
        <div class="goodsinfor1">
            <div class="goodsinforpic selected">
                <img src="image/详情1.jpg" alt="">
                <img src="image/详情2.jpg" alt="">
                <img src="image/详情3.jpg" alt="">
                <img src="image/详情4.jpg" alt="">
                <img src="image/详情5.jpg" alt="">
                <img src="image/详情6.jpg" alt="">
                <img src="image/详情7.jpg" alt="">
                <img src="image/详情8.jpg" alt="">
                <img src="image/详情9.jpg" alt="">
                <img src="image/详情10.jpg" alt="">
                <img src="image/详情11.jpg" alt="">
            </div>
            <div class="goodsinfordetailed">
                <ul>
                    <li><b>【商品编码】</b><span>957025</span></li>
                    <li><b>【品牌】</b><span>东芝</span></li>
                    <li><b>【主品配置】</b><span>提货券一张</span></li>
                    <li><b>【型号】</b><span>55L2600C</span></li>
                    <li><b>【配件】</b><span>主机*1、底座组件*1套（2个）、螺丝钉*4、产品说明书*1、保修卡*1、维修指南*1、遥控器*1、电池*2、AV转接线 *1、电源线*1</span></li>
                    <li><b>【电压/频率/功率】</b><span>220V/ 50Hz/130W</span></li>
                    <li><b>【屏幕分辩率】</b><span>1920*1080</span></li>
                    <li><b>【屏幕比例】</b><span>16：9</span></li>
                    <li><b>【能效等级】</b><span>二级</span></li>
                    <li><b>【网络连接】</b><span>支持有线/无线</span></li>
                    <li><b>【备注】</b><span>家有配送提货券，供应商配送商品并负责安装</span></li>
                </ul>
            </div>
        </div>
    </div>

</div>
<div class="side-fix">
    <a class="side-div1" href="">
        <i class="iconfont icon-phone"></i>
        <div class="erwm">
            <ul>
                <li><img src="image/2wm.png" alt=""></li>
                <li>家有购物微信</li>
            </ul>
        </div>
    </a>
    <br>

    <a href="" class="side-div2">
        <i class="iconfont icon-wechat"></i>
        <div class="erwm1">
            <ul>
                <li><img src="image/2wm.png" alt=""></li>
                <li>家有购物微信</li>
            </ul>
        </div>
    </a>

    <br>
    <div class="back-to-top">
        <a href="#h1">
            <i class="iconfont icon-shang"></i>
        </a>
    </div>
</div>
<div id="foot"></div>
</body>
<script>
    function emerge() {
        let cover = document.getElementById("cover")
        let picrighthid = document.getElementById("picrighthid")
        cover.classList.remove("hidden")
        picrighthid.classList.remove("hidden")
    }
    function hide() {
        let cover = document.getElementById("cover")
        let picrighthid = document.getElementById("picrighthid")
        cover.classList.add("hidden")
        picrighthid.classList.add("hidden")
    }
    function move(event) {
        var _event = event || window.event;
        var pic = document.getElementById("pic");
        var picright = document.getElementById("picright");
        var cover = document.getElementById("cover");
        var picrighthid = document.getElementById("picrighthid");
        var bigimg = document.getElementById("bigimg");
        var mul = 1.517;

        var mouseX = _event.clientX - pic.offsetLeft - picright.offsetLeft
        var mouseY = _event.clientY - pic.offsetTop - picright.offsetTop
        if(mouseX < cover.offsetWidth / 2) {
            mouseX = cover.offsetWidth / 2
        }
        if(mouseX > picright.offsetWidth - cover.offsetWidth / 2 + 356.101) {
            mouseX = picright.offsetWidth - cover.offsetWidth / 2
        }
        if (mouseY < cover.offsetHeight / 2) {
            mouseY = cover.offsetHeight / 2
        }
        if (mouseY > picright.offsetHeight - cover.offsetHeight / 2 + 230.156) {
            mouseY = picright.offsetHeight - cover.offsetHeight / 2
        }
        bigimg.style.left = -mul*mouseX + picrighthid.offsetWidth / 2 + 390.101 + "px"
        bigimg.style.top = -mul*mouseY + picrighthid.offsetHeight / 2 + 230.156 + "px"

        cover.style.left = mouseX - cover.offsetWidth / 2  + "px"
        cover.style.top = mouseY - cover.offsetHeight / 2  + "px"
    }
</script>
</html>
